<template>
  <!-- CouponChooseHistory 选择历史素材 -->
  <PageContainer>
    <view class="container">
      <Header title="创建">
        <view style="padding: 30rpx">
          <UniSearchBar
            placeholder="请输入名称"
            cancelButton="none"
            radius="10"
            bgColor="#F5F5F5"
            @confirm="searchFnc"
            @cancel="restFnc"
            @clear="restFnc"
          ></UniSearchBar>
        </view>
      </Header>
      <Paglist
        v-model="historyList"
        :is-init-api="true"
        :parame="parame"
        :size="20"
        @register="register"
        :scroll-top-bottom="200"
      >
        <template v-for="v in historyList" :key="v.id">
          <view class="history-item" @click="toCreate(v.id)">
            <text class="tag">福利券</text>
            <text class="text-overflow-1">{{ v.name }}</text>
          </view>
        </template>
      </Paglist>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  CouponChooseHistory  选择历史素材 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { provide, reactive, ref } from 'vue';
  import { redirectTo } from '@/router';
  import { type MemberCouponListResult } from '@/api/memberCoupon/types';
  import { memberCouponList } from '@/api/memberCoupon';

  const historyList = ref<MemberCouponListResult[]>([]);
  const parame = reactive({
    keyWord: '',
  });
  const [register, { refresh }] = useConList();

  const isRequest = ref(false);
  function toCreate(id: number) {
    redirectTo({ name: 'createMemberCoupon', options: { id } });
    // if (isRequest.value) return;
    // isRequest.value = true;
    // myCouponHistoryDetails(id)
    //   .then(async (r) => {
    //     let positionList: GetDownStatisticsListResult[] = [];
    //     if (r.couponRole === MemberCouponPermissionsEnum.SICHTTEIL && r.memberLeveIdList.length) {
    //       const levelList = await getDownStatisticsList();
    //       levelList.forEach((v) => r.memberLeveIdList.includes(v.id) && positionList.push(v));
    //     }

    //     redirectTo({ name: 'createMemberCoupon',options: { historyItem: r, positionList } });
    //   })
    //   .catch(() => (isRequest.value = false));
  }

  function searchFnc(res: { value: string }) {
    parame.keyWord = res.value;
    refresh();
  }

  function restFnc() {
    parame.keyWord = '';
    refresh();
  }

  provide('api', memberCouponList);
  provide('tabIsShow', null);
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    padding-left: 30rpx;
    background-color: #fff;
  }
  .history-item {
    height: 100rpx;
    border-bottom: 2rpx solid #dddddd;
    display: flex;
    align-items: center;
    color: #333;
    font-size: 28rpx;
    .tag {
      padding: 2rpx 12rpx;
      background-color: #d7b87c;
      color: #fff;
      font-size: 20rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      flex-shrink: 0;
    }
  }
</style>
